구글과 애플의 미니멀리즘 베끼기 경쟁

오늘 버전의 크로미움 빌드를 받아보았더니 맘에 들게 깔끔하게 바뀌어있었습니다. 이것이 구글 팀만의 성과이라기 보다는 미니멀리즘을 통해 서로가 서로를 베끼는 아름다운 과정에서 나온것 같아서 히스토리를 정리해보려고 합니다.

More Apple than Apple

ie 6

죽지마,부활할거야.


사파리 1

사파리 이전까지는 대세인 ie6를 따라서 브라우저 툴바에 여러 기능을 꾸겨 넣는게 유행이었는데요. 사파리는 기본 네비게이션에 필요한 버튼만 남기고 깔끔하게 정리하여 한 줄에 모아 넣어서 툴바 영역을 줄이고 컨텐트 페이지가 넓어지도록 하였습니다. 배타적으로 사용되는 리플레쉬와 중지를 하나의 버튼으로 통합하였습니다.
추가된 요소는 검색창입니다. 주소창에 주소를 입력하여 이동하는것보다 검색이 훨씬 많아졌거든요. 주소창에 파비콘을 보여준것도 사파리부터였던것 같습니다.


ie 7

ie7도 사파리에서 여러 아이디어들을 가져옵니다. 하지만 미니멀한 디자인 철학 같은건 따라할 수 없었나봅니다.


크롬 1

크롬은 사파리와 동일한 툴바 버튼 구성에서 시작합니다. 북마크추가 + 대신 구글의 별표를 사용한 정도.
주소창과 검색창을 통합한 옴니박스는 요소를 간결하게 하고 검색 사용성을 크게 높여주었습니다. 새로운건 아니고 ie 확장 유틸리티에 있던 기능이었습니다.
탭을 상단으로 올리면서 주소창과 탭을 통합하여 리던던트를 없앴습니다.
사파리 3가 윈도우용으로도 나왔지만 윈도우로 오면서 창제목바에 메뉴가 들어가면서 복잡해질 수 밖에 없었습니다. 깔끔한 타이틀바를 유지하기 위해서 메뉴바를 없애고 메뉴버튼을 오른쪽에 배치합니다.
북마크추가 버튼을 주소창과 합쳐서 깔끔해졌습니다.
새탭추가 버튼이 탭의 오른쪽에 새끼 탭같은 모양을 하고 있어 창의 맥 오른쪽에 + 표시만 있는 사파리에 비해 직관적입니다.(ie7와 사파리의 좋은것만 베꼈네요.)
탭에 제목이 왼쪽 정렬되거나 오른쪽에 닫기 버튼이 있는건 윈도우즈의 컨벤션인데 가운데 정렬에 비해서 더 보기 편합니다.


사파리 4

리플레쉬 버튼을 주소창 안으로 넣어 왼쪽 버튼 영역이 더욱 깔끔해졌습니다. 리플레쉬를 잘 안한다고 판단한것 같은데 깔끔하긴 하지만 저는 사실 좀 불편하더군요.
버튼을 주소창 안에 넣는것은 사파리1에서 RSS버튼에서부터 적용되었다고 볼 수 도 있습니다. 형식 자체를 새로 만들었다기 보다는 리플레쉬를 잘 사용하지 않는다는 판단을 한것 같습니다.

beta에서는 크롬의 영향으로 탭이 타이틀바 위로 올라옵니다. 크롬이 창을 움직일 수 있는 여유 공간을 주고 최대 탭크기가 정해져있는데 비해 애플은 창 영역을 꽉채우게 했습니다. 결과적으로 창 좀 움직여 보려고 하면 다른 탭이 선택되어서 짜증이 났습니다. 어설프게 따라했다가 욕 엄청 먹고나서 정식버전에서는 탭위치가 아래로 돌아옵니다.
북마크 + 버튼을 주소창에 붙이는것도 크롬을 따라합니다.


사파리5

보통 때는 닫기 버튼이 없고 마우스 오버하면 닫기버튼이 나오도록 바뀌었습니다. 사파리는 osx 컨벤션에 따라 탭 왼쪽에 닫기 버튼이 있어서 탭에 파비콘을 넣기가 애매합니다. 아마 다음 버전에 슬며시 파비콘을 넣을 수 있도록 닫기 버튼을 감춘게 아닌가 싶기도 합니다.


아이패드

아이패드는 http:// 를 없앴습니다. 화면이 작기도 하고 대부분 프로토콜이 http://이니까 중요한 정보가 아니거든요. 브라우저계의 근 20년만의 정보 디자인 혁신입니다. 필요한 정보가 아니면 뺍니다.


크롬 6

(개발자버전)에서는 이제 사파리를 따라서 북마크 버튼을 주소창에 넣었습니다.
그리고 아이패드나 아이폰의 툴바 스타일을 따라서 볼록한 버튼 영역을 없앴습니다.
아이폰 ios4를 따라 http:// 표시를 감춥니다.




크롬5 주소창(옴니박스)에는 아이콘이 없었는데요. 돋보기가 기본 아이콘으로 들어가서 검색을 할 수 있다는게 좀 더 명확해졌습니다. 기본적으로 주소를 입력하는게 아니라 검색하라는거죠. url형식이 입력되면 globe아이콘으로 바뀌게 됩니다.

뺄건 빼고 좋으면 베끼는 크롬은 이제 거의 완벽에 가까운 형태가 된것 같습니다. 음 더 뺄건 없을까요?

[참고##UI 역사##]